<template>
  <div style="width: 100%;height: 100%;">
    <Chart :cdata="cdata" :id="'main' + index"/>
  </div>
</template>

<script>
  import Chart from './chart.vue'
  export default {
    data () {
      return {
        cdata: {
          xData: [],
          seriesData: []
        },
        drawTiming: null
      }
    },
    components: {
      Chart,
    },
    props: {
      configCode: {
        type: String,
        default: ''
      },
      index: {
        type: Number,
        default: 0
      }
    },
    created() {
      this.cdata.xData = []
      this.cdata.seriesData = []
    },
    mounted () {
      this.drawTimingFn()
    },
    beforeDestroy () {
      clearInterval(this.drawTiming);
      this.drawTiming = null
    },
    methods: {
      drawTimingFn () {
        this.queryData();
        this.drawTiming = setInterval(() => {
          this.queryData();
        }, 17000);
      },
      queryData() {
        this.$http.get("/visShow/queryData", {
          params: {
            configCode: this.configCode,
            index: this.index
          }
        }).then(res => {
          const {data} = res
          console.log(data, '饼状图1')
          if (data.status == 200) {
            const temData = data.object.seriesList
            for (let i = 0; i < temData.length; i++) {
              this.cdata.xData.push(temData[i].name)
            }
            this.cdata.seriesData = temData
            // this.data = data.object.seriesList
            // this.$set(this.config, "header", data.object.header)
            // this.$set(this.config, "data", data.object.data)
          }
        })
      }
    }
  };
</script>

<style lang="scss" scoped>
</style>
